<!-- 组件说明 -->
<template>
    <div class='aboutus'>
        <el-row>
            <el-col :span="24" class="aboutusbanner">
            </el-col>
        </el-row>
        <el-tabs type="border-card" @tab-click="getUsTab" v-model="activeName">
            <el-tab-pane v-for="(item,index) in tabArr" :key="index" :name="item.name" :label="item.name" style="padding:0">
            </el-tab-pane>
        </el-tabs>
        <el-row v-show="isNormal"  id="abouttitle">
            <el-col :span="24" class="abouttitle">
                公司简介
            </el-col>
            <el-col :span="20" :offset="2" class="aboutcontent">
              <div id="companyProfile"></div>
            </el-col>
            <!--<el-col :span="20" :offset="2" class="aboutcontent">
                    公司目前设置四个业务事业部（新媒体事业部、技术服务事业部、运维事业部、创
                新业务事业部）和两个职能部门（综合管理部、财务部）。现有员工100余人，注册
                资金2000万元人民币。
            </el-col>
            <el-col :span="20" :offset="2" class="aboutcontent">
                    我公司是一家综合性软件与信息服务企业，主要提供IT咨询服务、IT技术服务以及IT
                外包服务等软件研制开发及信息服务，服务对象主要涉及政府机构以及通信、信息安
                全等高科技行业企业。
            </el-col>
            <el-col :span="20" :offset="2" class="aboutcontent">
                    我公司拥有一支工作认真、作风严谨、业务精湛的技术队伍，具有组织和承接电子
                政务工程建设、网络与信息安全保障、大型政务系统维护的丰富经验。
            </el-col>
            <el-col :span="20" :offset="2" class="aboutcontent">
                    作为一家秉承科技创新、服务至上的高新技术企业，公司已建立了涵盖OA系统开发、
                业务系统研制、系统整合应用、系统自身完善的业务链条，已成为拥有自主知识产权
                且具备设计和实施软件、系统集成应用一体化“一站式”解决方案能力的服务提供商。
            </el-col>
            <el-col :span="20" :offset="2" class="aboutcontent">
                    “技术领先！质量至上！创新进取！跨越发展！“ 是我公司的奋进口号。2008年5月14
                日公司首次获得计算机信息系统集成企业资质（三级），2011年6月9日公司首次获得
                ISO9001质量管理体系认证，2015年12月取得CMMI三级证书。
            </el-col>
            <el-col :span="20" :offset="2" class="aboutcontent">
                    我公司将以更优质的服务、更上乘的质量、更卓越的产品赢得广大客户的信任，满
                足众多客户的各类需求，以实现自身的持续发展和成长壮大！
            </el-col>-->
        </el-row>
        <el-row v-show="isNormal" id="honor">
            <el-col :span="24" class="honor">
                公司资质
            </el-col>
        </el-row>
        <el-row v-show="isNormal" style="margin:30px 0">
           <!-- <el-col class="cerdiv" :span="4" style="margin-top:30px" :offset="item.offsite" v-for="(item,index) in honorArr" :key="index">
                <img :src="item.imgurl" class="cerimg" alt="" >
                <div class="certicate">{{item.content}}</div>
            </el-col>-->
          <el-carousel style="margin-bottom:30px" :interval="4000" type="card" height="200px">
            <el-carousel-item v-for="(item,index) in zizhibannerArr" :key="index">
              <img :src="getImgUrl(item.img)" alt="" style="height:100%;width:100%">
            </el-carousel-item>
          </el-carousel>
        </el-row>
        <el-row v-show="isNormal" id="successexample">
            <el-col :span="24" class="successexample">
                成功案例
            </el-col>
        </el-row>
        <el-row v-show="isNormal">
            <el-col :span="18" :offset="3">
                <el-carousel style="margin-bottom:30px" :interval="4000" type="card" height="200px">
                    <el-carousel-item v-for="(item,index) in successArr" :key="index">
                        <img :src="getImgUrl(item.img)" alt="" style="height:100%;width:100%">
                    </el-carousel-item>
                </el-carousel>
            </el-col>
        </el-row>
        <el-col v-show="isNormal" :span="24" class="partner" id="partner">
            服务客户
        </el-col>
        <el-row v-show="isNormal" style="margin-bottom:50px">
            <!--<el-col :span="5" style="margin-top:30px;display: flex;justify-content: center;" :offset="item.offset" v-for="(item,index) in partnerImg" :key="index">
                <div style="box-shadow: 2px 4px 5px #949494;width:60%">
                    <img :src="item.img" alt="" style="width:90%;cursor: pointer;" @click="getPartner(item.url)">
                </div>
            </el-col>-->
          <el-col :span="18" :offset="3">
            <el-carousel style="margin-bottom:30px" :interval="4000" type="card" height="200px">
              <el-carousel-item v-for="(item,index) in kehuArr" :key="index">
                <img :src="getImgUrl(item.img)" alt="" style="height:100%;width:100%">
              </el-carousel-item>
            </el-carousel>
          </el-col>
        </el-row>
        <el-row v-show="isOffer" class="offertitle">
            <el-col :span="24" class="offerfrom">
                加入我们
            </el-col>
          <el-col :span="24" :offset="2" class="offeremail" >

              <div id="contactUs" style="text-align: center"></div>

            </el-col>
            <!--<el-col :span="24" class="jobtitle">
                <div class="jobbak">新媒体编辑</div>
            </el-col>
            <el-col :span="24" class="jobduty">
                <div class="dutycontent">
                    <span class="dutyicon"></span>
                    <span class="dutytitle">工作职责</span>
                </div>
                <div class="dutydescribe">
                1.负责工业和信息化部官方政务新媒体“工信微报”（含微博、微信、客户端等）的日常运营、推广优化等工作；<br>
                2.紧跟新媒体发展趋势，学习和研究同类型优秀新媒体平台，积极探索创新运营模式；<br>
                3.对运营推广数据进行整理，并定期做总结分析；<br>
                4.动态监测研判新媒体舆情，对社会关切、敏感舆情等提出应对建议及方案。<br>
                </div>
            </el-col>
            <el-col :span="24" class="jobduty">
                <div class="dutycontent">
                    <span class="dutyicon"></span>
                    <span class="dutytitle">任职要求</span>
                </div>
                <div class="dutydescribe">
                1.遵守中华人民共和国宪法和法律，具有良好的品行和职业道德；<br>
                2.新闻传播、汉语言文学等相关专业，本科及以上学历；<br>
                3.文字功底扎实，撰写能力强，有一定的美编能力；<br>
                4.责任心强，具备良好的团队精神，善于沟通、表达；<br>
                5.有网络推广优化或者新媒体编辑领域从业经验者优先。<br>
                </div>
            </el-col>
            <el-col :span="24" class="jobduty" style="margin-bottom:30px">
                <div class="dutycontent">
                    <span class="dutyicon"></span>
                    <span class="dutytitle">联系方式</span>
                </div>
                <div class="dutydescribe">
                联系人：张加明<br>
                联系电话：010-68200323<br>
                简历邮箱：zhangjiaming@miit.gov.cn<br>
                </div>
            </el-col>-->
        </el-row>
        <common-footer style="height:25vh"></common-footer>
    </div>
</template>

<script>
    //import x from ''
    import CommonFooter from '../components/common/Footer'
    import { getZizhi,getSuccess,getKehu,getAbout} from '../request/api'
    import Bus from '../request/bus'
    export default {
        components: {
            CommonFooter
        },
        data () {
            return {
                tabArr:[
                    {name:'公司简介'},
                    {name:'公司资质'},
                    {name:'成功案例'},
                    {name:'服务客户'},
                    {name:'加入我们'},
                ],
                activeName:"公司简介",
                honorArr:[
                    {imgurl:require('@/assets/img/about/soft1.png'),offsite:2,content:'软件产品登记证书 - 直报分析系统'},
                    {imgurl:require('@/assets/img/about/soft2.png'),offsite:0,content:'软件产品登记证书 - 电子政务平台'},
                    {imgurl:require('@/assets/img/about/soft3.png'),offsite:0,content:'软件产品登记证书 - OA系统'},
                    {imgurl:require('@/assets/img/about/soft4.png'),offsite:0,content:'计算机信息系统集成企业'},
                    {imgurl:require('@/assets/img/about/soft5.png'),offsite:0,content:'信息技术服务运行维护标准符合性证书'},
                ],
                partnerImg:[
                    {img:require('../assets/img/main/center.png'),offset:2,url:'http://www.miit.gov.cn/'},
                    {img:require('../assets/img/main/cc.png'),offset:0,url:'https://www.cert.org.cn/'},
                    {img:require('../assets/img/main/bh.png'),offset:0,url:'https://www.buaa.edu.cn/'},
                    {img:require('../assets/img/main/hn.png'),offset:0,url:'http://www.hntx.org.cn/'},
                ],
                //展示和隐藏的tab
                isNormal:true,
                isOffer:false,
                //成功案例
                successArr:[],
                //公司资质
                zizhibannerArr:[],
                //服务客户
                kehuArr:[],
                //公司简介
                /*companyProfile:'',
                contactUs:'*/
            };
        },
        computed: {

        },
        created(){
            Bus.$on("authordom", val=>{
                setTimeout(()=>{
                    this.goAnchor(val);
                },300);
            });
            Bus.$on("toptabclick", val=>{
                if(val =="1"){
                    this.isOffer = false;
                    this.isNormal = true;
                    this.activeName = "公司简介"
                    setTimeout(()=>{
                        this.goAnchor('.aboutusbanner');
                    },300)
                }else if(val =="2"){
                    this.isOffer = false;
                    this.isNormal = true;
                    this.activeName = "服务客户"
                    setTimeout(()=>{
                        this.goAnchor('#partner');
                    },300)
                }else{
                    this.getUsTab('5');
                    this.activeName = "加入我们"
                    setTimeout(()=>{
                        this.goAnchor('.aboutusbanner');
                    },300)
                }
            });
        },
        methods: {
          getImgUrl(url){
            return "http://39.99.217.167:8080"+url;
          },
            //点击伙伴获取链接
            getPartner(url){
                window.open(url)
            },
            getUsTab(tabitem){
                if(tabitem.index == "0"){
                    this.isOffer = false;
                    this.isNormal = true;
                    this.goAnchor("#abouttitle");
                }else if(tabitem.index == "1"){
                    this.isOffer = false;
                    this.isNormal = true;
                    this.goAnchor("#honor");
                }else if(tabitem.index == "2"){
                    this.isOffer = false;
                    this.isNormal = true;
                    this.goAnchor("#successexample");
                }else if(tabitem.index == "3"){
                    this.isOffer = false;
                    this.isNormal = true;
                    this.goAnchor("#partner");
                }else{
                    this.isOffer = true;
                    this.isNormal = false;
                }
            },
            //模拟锚点跳转
            goAnchor(selector) {
                let anchor = this.$el.querySelector(selector);
                let total = anchor.offsetTop;
                // 平滑滚动，时长500ms，每10ms一跳，共50跳
                // 获取当前滚动条与窗体顶部的距离
                let distance = document.documentElement.scrollTop || document.body.scrollTop
                // 计算每一小段的距离
                let step = total/50;
                (function smoothDown () {
                    if (distance < total) {
                        distance += step
                    　　// 移动一小段
                        document.body.scrollTop = distance
                        document.documentElement.scrollTop = distance
                    　　// 设定每一次跳动的时间间隔为10ms
                        setTimeout(smoothDown, 10)
                    } else {
                    　　// 限制滚动停止时的距离
                        document.body.scrollTop = total-60
                        document.documentElement.scrollTop = total-60
                    }
                })()
            }
        },
        mounted() {
            //获取Banner图
          getSuccess().then(res=>{
               this.successArr = res;
            });
          //获取公司资质轮播图
          getZizhi().then(res=>{
            this.zizhibannerArr = res;
          });
          //获取公司资质轮播图
          getKehu().then(res=>{
            this.kehuArr = res;
          });
          //获取关于我们数据
          getAbout().then(res=>{
           /* console.log(JSON.stringify(res)+'1231223')*/
            //拿到加入我们
            //this.contactUs = res.contactUs.content;
            document.getElementById('contactUs').innerHTML=res.contactUs.content;
            //拿到公司简介
            //this.companyProfile = res.companyProfile.content;
            document.getElementById('companyProfile').innerHTML=res.companyProfile.content;
          });
        },
        //生命周期 - 创建之前
        beforeCreate() {},
        //生命周期 - 挂载之前
        beforeMount() {},
        //生命周期 - 更新之前
        beforeUpdate() {},
        //生命周期 - 更新之后
        updated() {},
        //生命周期 - 销毁之前
        beforeDestroy() {},
        //生命周期 - 销毁完成
        destroyed() {},
        //如果页面有keep-alive缓存功能，这个函数会触发
        activated() {},
    }
</script>
<style>
.cerimg{
    width: 70%;
    padding-left: 2%;
    padding-top: 5%;
}
.cerdiv{
    box-shadow: 2px 4px 5px #949494;
    height:220px;
}
.certicate{
    font-size: 12px;
    font-weight: 600;
    width: 70%;
    text-align: center;
    margin:15px 0;
    margin-left: 15%;
}
.aboutus .el-tabs--border-card>.el-tabs__content{
    padding: 0;
}
</style>
<style scoped>
.dutydescribe{
    width: 70%;
    margin-left: 15%;
    text-align: left;
    font-size: 14px;
    line-height: 22px;
    padding-left: 20px;
}
.dutycontent{
    margin: 15px 0;
    width: 70%;
    margin-left: 15%;
    display: flex;
    align-items: center;
}
.dutytitle{
    font-size: 18px;
    padding-left: 10px;
}
.dutyicon{
    border-radius: 50%;
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #425358;
    margin-left: 10px;
}
.jobbak{
    background-image: url('../assets/img/about/jobtitlebak.png');
    width: 70%;
    margin-left: 15%;
    height: 45px;
    line-height: 45px;
    text-align: left;
    padding-left: 20px;
    font-size: 18px;
    background-repeat: no-repeat;
}
.offerfrom{
    color: #535353;
    font-size: 25px;
}
.offeremail{
    margin: 20px 0;
    color:#425383;
    font-size: 18px;
}
.offertitle{
    margin-top: 50px;
    margin-bottom: 20px;
}
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}
.aboutcontent{
    text-align: left;
    text-indent: 2em;
    padding: 5px 0;
    font-size: 14px;
}
.abouttitle,.honor,.successexample,.partner{
    font-size: 24px;
    color:#415CAD;
    margin-top: 40px;
    margin-bottom: 20px;
}
.aboutusbanner{
    background-image: url('../assets/img/compent/aboutbanner.png');
    height: 300px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

</style>
